<template>
  <div>
    <ToolBar :multi-selection="multiSelection">
      <div slot="select">
        <el-button type="default" size="small" @click="batchAssign">分配给</el-button>
        <el-button type="danger" size="small" @click="batchDelete">批量删除</el-button>
      </div>
      <div slot="unselect" class="unselect">
        <div class="title">所有工单</div>
        <div class="btn-group">
          <el-button size="small" @click="$router.push({name:'ticket-edit'})">新建工单</el-button>
        </div>
      </div>
    </ToolBar>
    <div>
      <TicketItem :ticket="item" v-for="(item,index) in ticketList"
                  :checkWatch="item.check"
                  @uncheck="handleSelectionChange(false,item)"
                  @check="handleSelectionChange(true,item)"></TicketItem>
      <div v-if="ticketList.length == 0 && !loading" style="text-align: center;line-height: 120px;font-size: 16px;color: #666666">
        暂无数据
      </div>
      <SearchGlobal @select="globalSelect" ref="searchGlobal"></SearchGlobal>
    </div>
  </div>
</template>

<script>

import ToolBar from '@/components/common/tool-bar'
import {findAllTicket, deleteByIdBatch, deleteById, assignTicket, assignBatch} from "@/api/ticket";
import TicketItem from './components/ticket-item'
import SearchGlobal from '@/components/common/zsh-search-global'
import {deletePeopleBatch} from "@/api/auth/tenant";

export default {
  name: "all",
  components: {
    TicketItem,
    ToolBar,
    SearchGlobal
  },
  data() {
    return {
      multiSelection:[],
      ticketList:[],
      loading: true
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      findAllTicket().then(res => {
        res.data.forEach(function (item) {
          item.check = false
        })
        this.ticketList = res.data
      }).finally(res => {
        this.loading = false
      })
    },
    clearSelect() {
      this.ticketList.forEach(function (item) {
        item.check = false
      })
      this.multiSelection = []
    },
    handleSelectionChange(isSelect,item) {
      if(isSelect) {
        item.check = true
        this.multiSelection.push(item)
      }else {
        item.check = false
        let that = this
        this.multiSelection.forEach(function (t,index) {
          if(item.ticketId == t.ticketId) {
            that.multiSelection.splice(index,1)
            return
          }
        })
      }
    },
    rowClick() {

    },
    batchDelete() {
      let arr = []
      this.multiSelection.forEach(function (item) {
        arr.push(item.ticketId)
      })
      this.$confirm('是否删除'+this.multiSelection.length+'个工单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteByIdBatch(arr).then(res => {
          if(res.code == 200) {
            this.$message.success('删除成功')
            this.clearSelect()
            this.loadData()
          }
        })
      }).catch(()=>{

      });
    },
    batchAssign() {
      let arr = []
      this.multiSelection.forEach(function (item) {
        arr.push(item.ticketId)
      })
      this.assignBatchList = arr
      this.$refs.searchGlobal.show('people')
    },
    globalSelect(mode,item) {
      let assignee
      let assigneeName
      if(item.hasOwnProperty('userId')) {
        assignee = 'user_'+item.userId
        assigneeName = item.nickname
      }else {
        assignee = 'dept_'+item.deptId
        assigneeName = item.name + ' (组)'
      }
      assignBatch(this.assignBatchList,assignee,assigneeName).then(res => {
        if(res.code == 200) {
          this.$message.success('分配成功')
          this.clearSelect()
          this.loadData()
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

.unselect {
  display: flex;
  align-items: center;
  .title {
    flex: 1;
    color: #606266;
    font-size: 14px;
  }
  .btn-group {
    display: flex;
    align-items: center;
  }
}
</style>
